{%  extends "base.html" %}
{% block content %}
<div class="row page" id="docs" style="display:block;">
        <div class="col-md-12" style="">
            <h3><i class="glyphicon glyphicon-leaf"></i> What is jsTree?</h3>
            {% include "base_index.html" %}

            <ul class="nav nav-tabs">
                <li ><a href="/" class="nava">Overview</a></li>
                <li><a href="/doc/config" class="nava">Configuration</a></li>
                <li><a href="/doc/htmls" class="nava">HTML data</a></li>
                <li><a href="/doc/json" class="nava">JSON data</a></li>
                <li class="active" id="selected_menu"><a href="/doc/events" class="nava">Events</a></li>
                <li><a href="/doc/interaction" class="nava">Interaction</a></li>
            </ul>
            <div class="tab-content">

            <div id="events" class="tab-content-item">

        <div class="row">
            <div class="col-md-12">
                <h3><i class="glyphicon glyphicon-leaf"></i> Listening for events</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p>jsTree triggers various events on the container. You can review <a href="/api/#/?q=.jstree%20Event">the
                    list of all events</a> to know what to listen for.</p>
                <p>To get more information about the event inspect its <code>data</code> argument.</p>
                <p>In most cases where a node is involved you will get the whole node object passed in. If you get an ID
                    string somewhere and want to inspect the node just use <a href="/api/#/?f=get_node">.get_node()</a>.
                    The internal node object is very similar to the JSON format used for loading, but has a few extra
                    properties, which might be useful: <code>children</code> is an array of all the IDs of the node's
                    immediate children, <code>children_d</code> is an array of all the IDs of the node's descendants,
                    <code>parent</code> is the IDs of the node's parent and <code>parents</code> is an array of all the
                    IDs of the node's ancestors.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
						<pre><code>
$('#jstree')
  <span class="comment">// listen for event</span>
  <strong>.on('changed.jstree',</strong> function (e, <strong>data</strong>) {
    var i, j, r = [];
    for(i = 0, j = data.selected.length; i &lt; j; i++) {
      r.push(data.instance.get_node(data.selected[i]).text);
    }
    $('#event_result').html('Selected: ' + r.join(', '));
  })
  <span class="comment">// create the instance</span>
  .jstree();
						</code></pre>
            </div>
            <div class="col-md-4">
                <div id="using_events" class="demo">
                    <ul>
                        <li id="r1" class="jstree-open" data-jstree='{"selected":true}'>Root 1
                            <ul>
                                <li id="n1">Child 1</li>
                                <li id="n2">Child 2</li>
                            </ul>
                        </li>
                        <li id="r2" class="jstree-open">Root 2
                            <ul>
                                <li id="n3">Child 3</li>
                                <li id="n4">Child 4</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div id="event_result" style="margin-top:2em; text-align:center;">&nbsp;</div>
                <script>
                    $(function () {
                        $('#using_events')
                            .on('changed.jstree', function (e, data) {
                                var i, j, r = [];
                                for (i = 0, j = data.selected.length; i < j; i++) {
                                    r.push(data.instance.get_node(data.selected[i]).text);
                                }
                                $('#event_result').html('Selected:<br /> ' + r.join(', '));
                            })
                            .jstree();
                    });
                </script>
            </div>
        </div>

    </div>
            </div>
</div>
    </div>
{% endblock %}